<template>
  <div class="node-detail">
    <el-card shadow="hover" style="height: 100%;overflow-y: scroll;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="样式" name="1"></el-tab-pane>
      </el-tabs>
      <NodeStyle v-if="activeName === '1'" v-model="nodeStyle" :selectedNode="selectedNode" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, PropType, ref, watch } from 'vue'
import NodeStyle from './components/nodeStyle.vue'
const props = defineProps({
  selectedNode: {
    type: Object as PropType<any>,
    default: null
  },
})
const emits = defineEmits(['updateNodeStyle'])
const activeName = ref('1')

const detailRef = ref();

const nodeStyle = ref(null)

const updateDetails = () => {
  detailRef.value.updateNewData();
}

watch(
  () => props.selectedNode,
  () => {
    if (!props.selectedNode) return
    nodeStyle.value = props.selectedNode.style
  },
  { immediate: true, deep: true }
)

watch(
  () => nodeStyle.value,
  () => {
    emits('updateNodeStyle', nodeStyle.value)
  },
  { immediate: true, deep: true }
)

defineExpose({
  updateDetails
})

</script>
<style lang="scss" scoped>
.node-detail {
  box-sizing: border-box;
  margin-left: 15px;
  width: 25vw;
  height: 100%;
}
</style>